<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .China {
            float: left;
            position: relative;
            width: 600px;
            height: 400px;
            background-color: red;
        }
        .star {
            margin: 50px 0;
            position: absolute;
            display: block;
            width: 0px;
            height: 0px;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #FAF307;
            border-left: 100px solid transparent;
        }
        .star:before {
            border-bottom: 80px solid #FAF307;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            display: block;
            content: '';
            transform: rotate(-35deg);
        }
        .star:after {
            position: absolute;
            display: block;
            top: 3px;
            left: -105px;
            width: 0px;
            height: 0px;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #FAF307;
            border-left: 100px solid transparent;
            transform: rotate(-70deg);
            content: '';
        }
        .star1 {
            top: 15px;
            left: 5px;
            transform: scale(.64) rotate(35deg);
        }
        .star2 {
            top: -48px;
            left: 100px;
            transform: scale(.2) rotate(-5deg);
        }
        .star3 {
            top: -8px;
            left: 140px;
            transform: scale(.2) rotate(5deg);
        }
        .star4 {
            top: 52px;
            left: 140px;
            transform: scale(.2) rotate(35deg);
        }
        .star5 {
            top: 92px;
            left: 100px;
            transform: scale(.2) rotate(-10deg);
        }
        .Korea {
            position: relative;
            float: left;
            margin-left: 34px;
            width: 300px;
            height: 200px;
            background-color: #ccc;
        }
        .Korea .center {
            position: relative;
            margin: 50px auto 0;
            width: 100px;
            height: 100px;
            background: linear-gradient(#C60C30 50%, #003478 50%);
            border-radius: 50%;
            transform: rotate(30deg);
        }
        .Korea .center::before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 50px;
            transform: translateY(-50%);
            background-color: #C60C30;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .Korea .center::after {
            content: '';
            display: block;
            position: absolute;
            right: 0;
            top: 50px;
            transform: translateY(-50%);
            background-color: #003478;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .Korea .round, .Korea .round::before, .Korea .round::after {
            position: absolute;
            width: 50px;
            height: 8px;
            background: #000;
        }
        .Korea .round::before, .Korea .round::after {
            display: block;
            content: '';
        }
        .Korea .round.top-left {
            top: 49px;
            left: 48px;
            transform: rotate(120deg);
        }
        .Korea .round.top-left::before, .Korea .round.top-right::before,.Korea .round.bottom-left::before,.Korea .round.bottom-right::before {
            top: 13px;
        }
        .Korea .round.top-left::after, .Korea .round.top-right::after, .Korea .round.bottom-left::after, .Korea .round.bottom-right::after {
            top: -13px;
        }
        .Korea .round.top-right {
            top: 47px;
            left: 198px;
            transform: rotate(55deg);
        }
        .Korea .round.top-right::before, .Korea .round.top-right::after {
            background: linear-gradient(90deg, black 47%, transparent 47%, transparent 53%, black 53%);
        }
        .Korea .round.bottom-left {
            top: 149px;
            left: 53px;
            transform: rotate(54deg);
            background: linear-gradient(90deg, black 47%, transparent 47%, transparent 53%, black 53%);
        }
        .Korea .round.bottom-right {
            top: 147px;
            left: 200px;
            transform: rotate(124deg);
        }
        .Korea .round.bottom-right, .Korea .round.bottom-right::before, .Korea .round.bottom-right::after {
            background: linear-gradient(90deg, black 47%, transparent 47%, transparent 53%, black 53%);
        }
        /* .USA {
            position: relative;
            float: left;
            margin-left: 34px;
            width: 300px;
            height: 200px;
            background: repeating-linear-gradient(#b22234, #b22234 7.69231%, white 7.69231%, white 15.38462%);
        }
        .USA .stars {
            background: #3c3b6e;
            position: relative;
            width: 40%;
            height: 53.84615%;
        }
        .USA .star {
            border-bottom-color: #FFF;
            top: -70px;
            left: -80px;
            transform: scale(0.1) rotate(35deg);
        }
        .USA .star:before {
            border-bottom-color: #FFF;
        }
        .USA .star:after {
            border-bottom-color: #FFF;
        } */
        .Maldives {
            position: relative;
            float: left;
            margin: 120px;
            width: 210px;
            height: 110px;
            background-color: #007F37;
            box-shadow: 0px 0px 0px 45px #D30731;
        }
        .Maldives::before, .Maldives::after {
            content: '';
            display: block;
            position: absolute;
            left: calc(50% + 15px);
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #fff;
        }
        .Maldives::after {
            left: calc(50% + 30px);
            background-color: #007F37;
        }
    </style>
</head>
<body>
    <div class="China">
        <div class="star star1"></div>
        <div class="star star2"></div>
        <div class="star star3"></div>
        <div class="star star4"></div>
        <div class="star star5"></div>
    </div>
    <div class="Korea">
        <div class="round top-left"></div>
        <div class="round top-right"></div>
        <div class="round bottom-left"></div>
        <div class="round bottom-right"></div>
        <div class="center"></div>
    </div>
    <!-- <div class="USA">
        <div class="stars">
            <div class="star"></div>
        </div>
    </div> -->
    <div class="Maldives">
    </div>
</body>
</html>